<template>
	<view class="main">
		<uni-card spacing="0" padding="0">
			<view class="row">
				<uni-row>
					<uni-col :span="2">
						<image class="image-header" src="@/static/images/linght.png"></image>
					</uni-col>
					<uni-col :span="22">
						<view class="title">发电信息统计</view>
					</uni-col>
				</uni-row>
			</view>
			<u-line></u-line>
			<qiun-data-charts type="line" :opts="analyopts" :chartData="analyData" :reshow="delayload" :ontouch="true" />
			<u-line></u-line>
			<view class="u-body-item">
				<view class="display">
					<image src="@/static/images/index/shanggreen.png" class="image2" />
					<view class="block">
						<view>今日发电量</view>
						<view class="number">{{ power.dayPower }}KWh</view>
					</view>
				</view>
				<view class="display">
					<image src="@/static/images/index/shangblue.png" class="image2" />
					<view class="block">
						<view>本月发电量</view>
						<view class="number">{{ power.monthPower }}KWh</view>
					</view>
				</view>
				<!-- 					<view class="display">
						<image src="@/static/images/index/shanggreen.png" class="image2" />
						<view class="block">
							<view>今日上网电量</view>
							<view>{{ power.dayOnlinePower }}KWh</view>
						</view>
					</view> -->
			</view>
			<u-line></u-line>
			<!-- 				<view class="u-body-item">

					<view class="display">
						<image src="@/static/images/index/shangblue.png" class="image2" />
						<view class="block">
							<view>本月上网电量</view>
							<view>{{ power.monthOnlinePower }}KWh</view>
						</view>
					</view>
				</view>
					<u-line></u-line> -->
			<view class="u-body-item ">
				<view class="display">
					<image src="@/static/images/index/shangred.png" class="image2" />
					<view class="block">
						<view>本年发电量</view>
						<view class="number">{{ power.yearPower }}KWh</view>
					</view>
				</view>
				<view class="display">
					<image src="@/static/images/index/shangyellow.png" class="image2" />
					<view class="block">
						<view>累计发电量</view>
						<view class="number">{{ power.cumulativePowerGeneration }}KWh</view>
					</view>
				</view>
				<!-- 					<view class="display">
						<image src="@/static/images/index/shangred.png" class="image2" />
						<view class="block">
							<view>本年上网电量</view>
							<view>{{ power.yearOnlinePower }}KWh</view>
						</view>
					</view> -->
			</view>
			<u-line></u-line>
			<!-- 				<view class="u-body-item ">

					<view class="display">
						<image src="@/static/images/index/shangyellow.png" class="image2" />
						<view class="block">
							<view>总上网电量</view>
							<view>{{ power.totalOnlinePower }}KWh</view>
						</view>
					</view>
				</view> -->

		</uni-card>

		<!-- 		<view style="text-align: center;">能源监控平台</view> -->
	</view>
</template>
<!-- <script>
export function getMonthPowers(query) {
  return request({
    url: 'http://101.43.167.131/prod-api/zsy/mainController/getMonthPowers',
    method: 'get',
    params: query // 将参数传递给接口
  });
}
</script> -->
<script  setup>
import { getMonthPowers, getRegionPowerData } from '@/api/report';
import { ref, reactive, onMounted } from 'vue';
const delayload = ref(false);
const analyData = ref({});
const power = reactive({
	Power: "",
	thPower: "",
	rPower: "",
	ulativePowerGeneration: "",
})
const average = ref({});
onMounted(() => {

	let now = new Date();
	let start = new Date();
	start.setDate(start.getDate() - 30);
	let starttime = start.toString();
	let endtime = now.toString();
	let par = {
		regionId: 285,
		regionType: 2,
		startTime: starttime,
		endTime: endtime
	}

	getMonthPowers(par).then(result => {
		// 处理响应数据
		// console.log(res);
		let res = {
			categories: [],
			series: [
				{
					style: 'curve',
					name: "发电量",
					data: []
				},
				// {
				// 	name: "上网电量",
				// 	linearColor: [
				// 		[
				// 			0,
				// 			"2c2c2c"
				// 		]
				// 	],
				// 	data: []
				// }
			]
		};
		var category = [];
		for (let i = 0; i < result.attributes.stationTopTenPR.category.length; i++) {
			category[i] = result.attributes.stationTopTenPR.category[i].split(" ")[0];
		}
		for (let i = 0; i < category.length; i++) {
			category[i] = category[i].split("-")[2];
		}
		res.categories = category;
		res.series[0].data = result.attributes.stationTopTenPR.series[0].data
		// res.series[1].data = result.attributes.stationTopTenPR.series[1].data
		analyData.value = JSON.parse(JSON.stringify(res));

		const sum = res.series[0].data.reduce((acc, cur) => acc + cur, 0);

		average.value = Math.round(sum / res.series[0].data.length);
		analyopts.extra.markLine.data[0].value = average.value;
	})
	// 发电量
	const params = {
		regionId: 285,
		regionType: 2,
	}
	getRegionPowerData(params).then(res => {
		power.dayPower = res.day[0].value;
		power.monthPower = res.month[0].value;
		power.yearPower = res.year[0].value;
		power.cumulativePowerGeneration = res.all[0].value;
	})
	setTimeout(() => {
		delayload.value = true;
	}, 0);


});
const analyopts = {

	color: ["#d8241d"],
	padding: [30, 30, 20, 20],
	dataPointShapeType: 'hollow',
	duration: 100,
	enableScroll: true,
	legend: {
		show: false,
	},
	xAxis: {
		title: "日",
		itemCount: 8,
		disableGrid: true,
		scrollShow: true,
		scrollAlign: 'right'
	},
	yAxis: {
		gridType: "dash",
		dashLength: 2,
		data: []
	},

	extra: {
		line: {
			type: "curve",
			width: 2,
			activeType: "solid",
			linearType: "custom"
		},
		markLine: {
			type: "dash",
			data: [
				{
					labelBgColor: "#eeeeed",
					showLabel: true,
					lineColor: "#d81e06",
					labelFontColor: "#d81e06",
				}
			]
		}
	}
};


// const linopts = {
// 	color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
// 	padding: [15, 15, 0, 5],
// 	enableScroll: false,
// 	legend: {},
// 	xAxis: {
// 		disableGrid: true
// 	},
// 	yAxis: {
// 		data: [{
// 			min: 0
// 		}]
// 	},
// 	extra: {
// 		column: {
// 			type: "group",
// 			width: 30,
// 			activeBgColor: "#000000",
// 			activeBgOpacity: 0.08
// 		}
// 	}
// };

// onMounted(() => {
// 	getMonthPowers();
// 	setTimeout(() => {
// 		delayload.value = true;
// 	}, 0);
// });

// function getMonthPowers() {
// 	const res = {
// 		categories: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日',
// 			'14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日',
// 			'27日', '28日', '29日', '30日'
// 		],
// 		series: [{
// 				name: "发电量",
// 				linearColor: [
// 					[0, "#d81e06"],
// 				],
// 				data: [1600, 1500, 1700, 1300, 1400, 1550, 1800, 1700, 1900, 2000, 2100, 2200, 2400,
// 					2500, 2300, 2200, 1900, 1800, 1700, 1600, 1550, 1500, 1450, 1400, 1350, 1300,
// 					1250, 1200, 1150, 1100
// 				]
// 			},
// 			// {
// 			// 	name: "上网电量",
// 			// 	linearColor: [
// 			// 		[0, "2c2c2c"],
// 			// 	],
// 			// 	data: [800, 900, 700, 1000, 950, 850, 1000, 900, 1100, 1200, 1300, 1400, 1600, 1700,
// 			// 		1500, 1400, 1200, 1100, 1000, 950, 900, 850, 800, 750, 700, 650, 600, 550, 500,
// 			// 		450
// 			// 	]
// 			// }
// 		]
// 	};
// 	analyData.value = res;
// }

</script>

<style scoped lang="scss">
.row {
  padding: 20rpx 20rpx 12rpx 20rpx;
  color: black;
  .image-header {
	height: 40rpx;
	width: 40rpx;
	margin-left: -4rpx;
}

.title {
	margin-left: -18rpx;
	font-size: 32rpx;
}
}


.u-body-item {
	font-size: 28rpx;
	color: #333;
	padding: 15rpx 10rpx;

}

.image2 {
	height: 40rpx;
	width: 50rpx;
	margin-left: 18rpx;
	margin-bottom: 10rpx;
}

.block {
	display: inline-block;
	margin: 10rpx 0 10rpx 20rpx;

	font-size: 28rpx;

}

.display {
	display: inline-block;
	width: 50%;
}

.main {
	background-color: #f4f4f5;
	height: 100%;
	width: 100%;
}
.number{
	color:darkgray;
	font-size: 26rpx;
}
</style>
